<template>
	<div class="app-process">
		<div class="app-process__left hidden-xs-only" @click="toLeft">
			<i class="el-icon-arrow-left" />
		</div>

		<div class="app-process__scroller">
			<div
				class="block"
				v-for="(item, index) in visitedViews"
				:key="index"
				:class="{ active: item.active }"
				:data-index="index"
				@mousedown="e => onTap(e, item)"
			>
				<span>{{ item.meta.label }}</span>

				<i
					class="el-icon-close"
					v-if="index > 0"
					:class="{ active: index > 0 }"
					@mousedown.stop="onDel(item, index)"
				/>
			</div>
		</div>

		<div class="app-process__right hidden-xs-only" @click="toRight">
			<i class="el-icon-arrow-right" />
		</div>

		<ul class="context-menu" v-show="menu.visible" :style="menu.style">
			<li @click="onRefresh(selectedTag)">刷新当前</li>
			<li @click="onClose('current', selectedTag)" v-if="isHit">关闭当前</li>
			<li @click="onClose('other', selectedTag)">关闭其他</li>
			<li @click="onClose('all', selectedTag)">关闭所有</li>
		</ul>
	</div>
</template>

<script>
import { mapGetters, mapMutations, mapState } from "vuex";
import { last } from "cl-admin/utils";
export default {
	name: "cl-process",

	data() {
		return {
			menu: {
				visible: false,
				current: {},
				style: {
					left: 0,
					top: 0
				}
			},

			isHit: false,

			selectedTag: {}
		};
	},

	computed: {
		// ...mapGetters(["processList"]),
		...mapState("common", ["visitedViews"]),
		...mapGetters(["app", "menuGroup"])
	},

	mounted() {
		this.$el.oncontextmenu = e => {
			e.returnValue = false;
		};

		document.body.addEventListener("click", () => {
			if (this.menu.visible) {
				this.menu.visible = false;
			}
		});
	},
	methods: {
		// ...mapMutations(["ADD_PROCESS", "DEL_PROCESS", "SET_PROCESS"]),
		...mapMutations(["SET_MENU_LIST"]),
		onTap(e, item) {
			this.isHit = item.path != "/";
			if (e.button == 0) {
				this.$router.push(item.path);
			} else {
				this.menu = {
					current: item,
					visible: true,
					style: {
						left: e.layerX + "px",
						top: e.layerY + "px"
					}
				};
			}
			this.selectedTag = item;
			this.getMenuIndex();
		},
		getMenuIndex(path) {
			const { showAMenu } = this.app.conf;
			if (!showAMenu) return;
			const deep = item => {
				if (this.$route.path === "/") {
					return false;
				}
				if (item.path == path) {
					return item;
				}
				if (item.path == this.$route.path) {
					return item;
				}
				if (item.children) {
					const ret = item.children.map(deep).find(Boolean);
					if (ret) {
						return [item, ret];
					}
					return false;
				}
				return false;
			};
			let list = _(this.menuGroup)
				.map(deep)
				.filter(Boolean)
				.flattenDeep()
				.value();
			if (list.length) {
				let curr = list[0];
				let index = _.findIndex(this.menuGroup, { id: curr.id });
				this.SET_MENU_LIST(index);
			}
		},
		onDel(view, index) {
			// this.DEL_PROCESS(index);
			this.$store.dispatch("common/delView", view).then(({ visitedViews }) => {
				if (this.isActive(view)) {
					this.toPath(visitedViews, view);
				}
			});
		},
		onRefresh(view) {
			this.$store.dispatch("common/delCachedView", view).then(() => {
				console.log(view);
				const { path } = view;
				this.$nextTick(async () => {
					await this.$router.replace({
						path: "/redirect" + path
					});
					this.getMenuIndex(path);
				});
			});
		},
		onClose(cmd, view) {
			// const { current } = this.menu;

			switch (cmd) {
				//关闭当前
				case "current":
					// this.onDel(this.processList.findIndex((e) => e.value == current.value));
					this.$store.dispatch("common/delView", view).then(({ visitedViews }) => {
						if (this.isActive(view)) {
							this.toPath(visitedViews);
						}
					});
					break;

				case "other":
					this.$store
						.dispatch("common/delOthersViews", this.selectedTag)
						.then(({ visitedViews }) => {
							view.active = true;
							this.getMenuIndex(view.path);
							if (!this.isActive(view)) {
								this.toPath(visitedViews);
							}
						});
					break;
				case "all":
					// this.SET_PROCESS(this.processList.filter((e) => e.value == "/"));
					this.$store.dispatch("common/delAllViews").then(({ visitedViews }) => {
						this.toPath(visitedViews);
					});
					break;
			}
		},
		isActive(route) {
			return route.path === this.$route.path;
		},
		async toPath(visitedViews) {
			const latestView = last(visitedViews);
			if (latestView.path != "/") {
				await this.$router.push(latestView.path);
				this.getMenuIndex(latestView.path);
			} else {
				this.$router.push("/");
			}
		},

		toLeft() {
			let scroller = this.$el.querySelector(".app-process__scroller");
			scroller.scrollTo(scroller.scrollLeft - 100, 0);
		},

		toRight() {
			let scroller = this.$el.querySelector(".app-process__scroller");
			scroller.scrollTo(scroller.scrollLeft + 100, 0);
		}
	}
};
</script>

<style lang="scss" scoped>
.app-process {
	display: flex;
	align-items: center;
	height: 30px;
	position: relative;

	&__left,
	&__right {
		background-color: #fff;
		height: 30px;
		line-height: 30px;
		padding: 0 2px;
		border-radius: 3px;
		cursor: pointer;

		&:hover {
			background-color: #eee;
		}
	}

	&__left {
		margin-right: 10px;
	}

	&__right {
		margin-left: 10px;
	}

	&__scroller {
		width: 100%;
		flex: 1;
		overflow-x: auto;
		overflow-y: hidden;
		white-space: nowrap;

		&::-webkit-scrollbar {
			display: none;
		}
	}

	.block {
		display: inline-flex;
		align-items: center;
		border-radius: 3px;
		height: 30px;
		line-height: 30px;
		padding: 0 10px;
		background-color: #fff;
		font-size: 12px;
		margin-right: 10px;
		color: #909399;
		cursor: pointer;

		&:last-child {
			margin-right: 0;
		}

		i {
			font-size: 14px;
			width: 0;
			overflow: hidden;
			transition: all 0.3s;

			&:hover {
				color: #fff;
				background-color: $color-primary;
			}
		}

		&:hover {
			.el-icon-close {
				width: auto;
				margin-left: 5px;
			}
		}

		&.active {
			span {
				color: $color-primary;
			}

			i {
				width: auto;
				margin-left: 5px;
			}

			&:before {
				background-color: $color-primary;
			}
		}
	}

	.context-menu {
		margin: 0;
		background: #fff;
		z-index: 100;
		position: absolute;
		list-style-type: none;
		padding: 5px 0;
		border-radius: 4px;
		font-size: 12px;
		font-weight: 400;
		color: #333;
		box-shadow: 2px 2px 3px 0 rgba(0, 0, 0, 0.3);

		li {
			margin: 0;
			padding: 7px 16px;
			cursor: pointer;

			&:hover {
				background: #eee;
			}
		}
	}
}
</style>
